<template>
  <div>
    <div class="time-wrapper">
      <div class="left">上次登陆时间：<span class="time">{{lastTime}}</span></div>
      <div class="right">当前时间：<span class="time">{{nowTime}}</span></div>
    </div>

    <div class="card-wrapper">
      <div class="box-card">
        <div class="box-header" style=" background: #17A2B8;">总博文数</div>
        <div class="box-text">{{articleNum}}</div>
      </div>
      <div class="box-card">
        <div class="box-header" style=" background: #FFC107;">总类目数</div>
        <div class="box-text">{{typeNum}}</div>
      </div>
    </div>

    <div class="view-trend">
      <el-card class="view-card">
        <div slot="header" class="view-header">日历表</div>
        <div class="graphic-wrapper">
          <el-calendar></el-calendar>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {TimeFormat} from '../../assets/TimeFormat'
export default {
  name: "Home",
  data() {
    return {
      token: '',
      timeId: '',
      lastTime: TimeFormat(Date.now()),  // 上次登录的时间
      nowTime: TimeFormat(Date.now()),  // 当前时间
      pageViews: 0,  // 总访问量
      articleNum: 0,   // 总博文数
      typeNum: 0,  // 总类目数
    }
  },
  methods: {
    getLastLogTime() {
      this.$http.get('/admin/getLastLogTime', {
        headers:{'Authorization': this.token}
      }).then(response=>{
        let result= response.data;
        if(result.code===200) {
          this.lastTime= result.data;
        }
      }).catch(e=>{});
    },
    getPageViews() {
      this.pageViews= 100;
    },
    getDataNum() {
      this.$http.get('/admin/getDataNum', {
        headers:{'Authorization': this.token}
      }).then(response=>{
        let result= response.data;
        if(result.code===200) {
          this.typeNum= result.data.typeNum;
          this.articleNum= result.data.articleNum;
        }
      })
    },
  },
  mounted() {
    let userInfo= window.sessionStorage.getItem('userInfo');
    if(userInfo) {
      this.token= JSON.parse(userInfo)['token']
    }
    this.timeId= setInterval(()=>{
      this.nowTime= TimeFormat(Date.now());
    }, 1000);

    this.getPageViews();
    this.getDataNum();
    this.getLastLogTime();
  },
  beforeDestroy() {
    clearInterval(this.timeId);
  }
}
</script>

<style scoped lang="less">
  .time-wrapper {
    width: 100%;
    padding: 20px;
    background: #cccccc;
    box-sizing: border-box;
    border-radius: 4px;
    .left {
      float: left;
    }
    .right {
      float: right;
    }
    &::after {
      display: block;
      content: "";
      height: 0;
      line-height: 0;
      visibility: hidden;
      clear: both;
    }
  }

  .card-wrapper {
    width: 100%;
    margin: 30px 0;
    display: flex;
    flex-direction: row;
    //justify-content: space-between;
    .box-card {
      width: 30%;
      border-radius: 4px;
      border: 1px solid #EBEEF5;
      background-color: #FFF;
      padding: 0;
      margin-right: 40px;
      .box-header, .box-text {
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-radius: 4px 4px 0 0;
      }
      .box-header {
        border-bottom: 1px solid #EBEEF5;
        color: #fff;
      }

      .clearfix:before, .clearfix:after {
        display: table;
        content: "";
      }
      .clearfix:after {
        clear: both
      }
    }

  }
  .view-trend {
    width: 100%;
    .view-card {

      /deep/ .el-card__header {  // 深度作用选择器
        background: #007BFF !important;
        color:#fff;
        padding: 10px 20px;
      }

      .graphic-wrapper {
        background: #fff;

        /deep/ .el-calendar-table .el-calendar-day {
          height: 56px;
        }
      }
    }
  }

</style>
